
const draggable = {
  mounted(el) {
    el.style.cursor = 'move'
    el.style.userSelect = 'none'
    if (window.getComputedStyle(el).position === 'static') {
        el.style.position = 'absolute'
      }
      
    el.onmousedown = (e) => {
      const disX = e.clientX - el.offsetLeft
      const disY = e.clientY - el.offsetTop
      
      document.onmousemove = (e) => {
        let left = e.clientX - disX
        let top = e.clientY - disY
        const maxLeft = document.documentElement.clientWidth - el.offsetWidth
        const maxTop = document.documentElement.clientHeight - el.offsetHeight
        
        left = Math.max(0, Math.min(left, maxLeft))
        top = Math.max(0, Math.min(top, maxTop))
        
        el.style.left = `${left}px`
        el.style.top = `${top}px`
      }
      
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

export default draggable